import Svg from "@/components/base/Svg"
import { useUserWallet } from "@/features/business/HomePage_deprecated/atoms_deprecated"
import { formatCurrency } from "@/utils/format"
import styled from "@emotion/styled"
import BalanceButton from "./BalanceButton"
import BalanceIcon from "./BalanceIcon"
import { useEffect } from "react"

const UserCenterBallance = styled.div`
    display: flex;
    flex-direction: column;
    position: relative;
`

const BgColor = styled.div`
    background: rgba(163, 223, 250, 0.1);
    height: 100%;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 60rem;
        background: linear-gradient(
            95deg,
            rgba(255, 193, 204, 0.8) 0%,
            rgba(255, 229, 180, 0.6) 30%,
            rgba(163, 223, 250, 0.4) 70%,
            transparent 100%
        );
        backdrop-filter: blur(10px); /* 添加模糊效果 */
        z-index: 0; /* 放在底层 */
    }
    background-attachment: fixed;
`
const BalanceContainer = styled.div`
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 10rem;
    z-index: 1;
    width: 351rem;
    height: 164rem;
    margin: 0 auto 8rem;
`

const BalanceTitleLine = styled.div`
    width: 351rem;
    height: 24rem;
    margin-top: 12rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
`

const BalanceTitle = styled.div`
    font-family: "SF Pro";
    font-weight: 500;
    font-size: 16rem;
    color: #131416;
    /* margin-right: 138rem;*/
    margin-left: 16rem;
`

const BalancePrice = styled.div`
    font-family: "Gilroy";
    font-weight: 500;
    font-size: 18rem;
    color: #ff3355;
    margin-right: 16rem;
`

const ButtonWrapper = styled.div`
    display: flex;
    justify-content: center;
    margin-top: 12rem;
`

const IconWrapper = styled.div`
    display: flex;
    justify-content: space-around;
    margin: 16rem auto 0;
    width: 316rem;
`

export default function RootLayout() {
    const { wallet, getUserWallet } = useUserWallet()

    useEffect(() => {
        getUserWallet()
    }, [getUserWallet])
    // 格式化余额
    const formattedBalance = formatCurrency(wallet.balance ? parseFloat(wallet.balance) : 0, {
        currency: "PHP",
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
    })
    return (
        <UserCenterBallance>
            {/* <BgColor /> */}
            <BalanceContainer>
                <BalanceTitleLine>
                    <BalanceTitle>My Balance</BalanceTitle>
                    <BalancePrice>{formattedBalance}</BalancePrice>
                </BalanceTitleLine>
                <ButtonWrapper>
                    <BalanceButton
                        color="#FFD6E0"
                        name="Deposit"
                        shadowColor="#f288ab"
                    />
                    <BalanceButton
                        color="#E6F9E6"
                        name="Withdraw"
                        shadowColor="#91f391"
                    />
                </ButtonWrapper>
                <IconWrapper>
                    <BalanceIcon
                        color="rgba(48, 94, 232, 0.2)" // 浅蓝色
                        icon={<Svg src="pages/UserCenterPage/balance1.svg" />}
                        name="Transaction"
                        to="/s-transaction"
                    />
                    <BalanceIcon
                        color="rgba(233, 28, 97, 0.2)" // 浅粉色
                        icon={<Svg src="pages/UserCenterPage/balance2.svg" />}
                        name="Bet records"
                        to="/bet-record"
                    />
                    <BalanceIcon
                        color="rgba(20, 230, 90, 0.2)" // 浅绿色
                        icon={<Svg src="pages/UserCenterPage/balance3.svg" />}
                        name="Bonus"
                        to="/s-transaction/bonus"
                    />
                    <BalanceIcon
                        color="rgba(48, 94, 232, 0.2)" // 浅蓝色
                        icon={<Svg src="pages/UserCenterPage/balance4.svg" />}
                        name="Account"
                        to="/withdraw-accounts"
                    />
                </IconWrapper>
            </BalanceContainer>
        </UserCenterBallance>
    )
}
